<template>
  <!-- 确认出库 -->
  <view class="confirmedDelivery">
    <view class="top">
      <van-cell-group>
        <van-field 
          :value="form.applyname" 
          label="申请人："
        ></van-field>
        <van-field
          :value="form.outbound_reason"
          label="出库原因："
        ></van-field>
        <van-field
          :value="form.expect_time"
          title-width="100"
          label="期望领用时间："
        ></van-field>
      </van-cell-group>
    </view>
    <view class="content"  v-if="form.outbound_type == '0'">
      <view class="title flexb">
        <view class="title_left"> 采购商品明细 </view>
        <view class="title_right flexb f26">
          <view>共<text>{{ form.purchasegoodsinfo.length }}</text >件商品</view>
          <view class="total ml10">总计：
            <text>
              ￥ {{form.purchasegoodsinfo.reduce( (prev, item) => prev * 1 + item.menu_money * 1,0)}}
            </text>
          </view>
        </view>
      </view>
      <view class="list_box">
        <view  class="list_item f28" v-for="(item, index) in form.purchasegoodsinfo" :key="index">
          <view class="list_item_title flexb">
            <view class="name flexAI f28 fwbold">
              <view class="point br50 mr10"></view>
              <view>品名：{{ item.goods_name }}</view>
            </view>
            <view> 数量：{{ item.goods_num }}</view>
          </view>
          <view class="type-inventory flexb">
            <view>使用类型：{{ item.use_type_name }}</view>
          </view>
          <view class="subtotal disFlex jcend">
            小计：<text>￥{{ item.menu_money }}</text>
          </view>
        </view>
      </view>

    </view>
      
    <view class="content"  v-else>
      <view class="title flexb">
        <view class="title_left"> 采购商品明细 </view>
        <view class="title_right flexb f26">
          <view>共<text>{{ form.purchasegoodsinfo.length }}</text >件商品</view>
          <view class="total ml10">总计：
            <text>
              ￥ {{form.purchasegoodsinfo.reduce( (prev, item) => prev * 1 + item.goods_all_price * 1,0)}}
            </text>
          </view>
        </view>
      </view>
      <view class="list_box">
        <view  class="list_item f28" v-for="(item, index) in form.purchasegoodsinfo" :key="index">
          <view class="list_item_title flexb">
            <view class="name flexAI f28 fwbold">
              <view class="point br50 mr10"></view>
              <view>品名：{{ item.goods_name }}</view>
            </view>
            <view> 数量：{{ item.goods_num }} {{ item.unit_name }}</view>
          </view>
          <view class="type-inventory flexb">
            <view>使用类型{{ item.use_type_name }}</view>
            <view>库存：{{ item.goodssnstock }}</view>
          </view>
          <view class="subtotal disFlex jcend">
            小计：<text>￥{{ item.goods_all_price }}</text>
          </view>
        </view>
      </view>
    </view>
    <view class="btn-box mt100">
      <!-- 后期需要 -->
      <!-- <van-button color="#999999 " type="info" @click="disagree">不同意</van-button> -->
      <van-button color="#62B158" type="info" @click="editProject">出库</van-button>
    </view>
    <!-- 不同意弹框 -->
    <van-overlay :show="disagreeShow">
      <view class="wrapper flexc">
        <view class="block f28">
          <view class="title flexb f32">
            <view class="title-left fwbold"> 不同意 </view>
            <view class="icon" @click="offShow">
              <van-icon name="clear" color="#3E3D3D" size="20px" />
            </view>
          </view>
          <view class="content">
            <view class="title"> 审核人意见: </view>
            <view>
              <van-cell-group rows="5">
                <van-input
                  v-model="idear"
                  rows="8"
                  type="textarea"
                  placeholder="请填写意见"
                  autosize
                  required="false"
                ></van-input>
              </van-cell-group>
            </view>
            <view class="btn_style">
              <van-button color="#999999 " type="info" @click="cancel">取消</van-button>
              <van-button color="#62B158" type="info" @click="noAgree">提交</van-button>
            </view>
          </view>
        </view>
      </view>
    </van-overlay>
  </view>
</template>

<script>
import vanInput from '../../components/van-input/van-input.vue';
export default {
  components: { vanInput },
  data() {
    return {
      form: {
        purchasegoodsinfo: [],
        outbound_sn: "", //出库单号
        outbound_type: "", //出库单类型
      },
      disagreeShow: false,
      confirm: "", //是否同意出库
      idear: "", //原因
    };
  },

  // 监听页面加载，该钩子被调用时
  onLoad(options) {
    this.form.outbound_sn = options.outbound_sn;
    this.form.outbound_type = options.outbound_type;
  },
  methods: {
    /*出库*/ 
    async editProject() {
      this.confirm = 1;
      if (this.confirm == 1) {
        let res = await this.$ajax.goConfirm({
          outbound_sn: this.form.outbound_sn,
          opinion: this.form.outbound_reason,
          confirm: this.confirm,
        });
        if (res.code == 1) {
          uni.showToast({
            title: res.msg,
            icon: "none",
            duration: 1000,
          });
          setTimeout(()=>{
            uni.navigateTo({
              url: "../outboundManagement/outboundManagement",
            });
          },1000)
        } else {
          uni.showToast({
            title: res.msg,
            icon: "none",
            duration: 1000,
          });
          setTimeout(()=>{
            uni.navigateTo({
              url: "../outboundManagement/outboundManagement",
            });
          },1000)
        }
      }
    },
    /*获取页面确认出库的列表页数据*/ 
    async getZixuaneditdetail() {
      let res = await this.$ajax.getZixuaneditdetail({
        outbound_sn: this.form.outbound_sn,
        outbound_type: this.form.outbound_type,
      });
      if (res.code == 1) {
        this.form = res.data.outbound_info;
        if (this.form.outbound_type == "0" ) {
          this.form.purchasegoodsinfo = res.data.outbound_info.outbound_menu_goods
        }
      } else {
        uni.showToast({
          title: res.msg,
          icon: "none",
        });
      }
    },
    /*关闭*/ 
    offShow() {
      this.disagreeShow = false;
    },
    /*不同意*/ 
    disagree() {
      this.disagreeShow = true;
    },
    /*提交*/ 
    async noAgree() {
      if (this.idear) {
         this.confirm = 0;
         if (this.confirm == 0) {
            let res = await this.$ajax.goConfirm({
                outbound_sn: this.form.outbound_sn,
                opinion:this.idear,
                confirm: this.confirm,
            })
            if (res.code == 1) {
              uni.showToast({
                  title: res.msg,
                  icon: "none",
                  duration: 1000,
              });
            }else{
              uni.showToast({
              title: res.msg,
              icon: "none",
            });
            }
         }
      }else{
          uni.showToast({
            title: "请填写审核人意见",
            icon: "none",
            duration: 1000,
          });
      }
      // this.confirm = 0;
    },
    /*取消*/ 
    cancel() {
      this.disagreeShow = false;
    },
  },

  mounted() {
    this.getZixuaneditdetail();
  },

  // 监听页面显示，页面每次出现在屏幕上都触发
  onShow() {
    uni.setNavigationBarTitle({
      title: "确认出库",
    });
  },

  // 监听用户下拉动作，一般用于下拉刷新
  onPullDownRefresh() {},

  // 监听页面初次渲染完成，此时组件已挂载完成
  onReady() {},
};
</script>

<style lang="scss" >
.van-field__control .van-field__control--textarea .input-class {
  min-height: 300rpx;
  border: 1px solid;
}
.custom-class .van-cell-group .van-hairline--top-bottom {
  min-height: 300rpx;
  border: 1px solid;
}
.confirmedDelivery {
  width: 100%;
  height: 100%;
  min-height: 100vh;
  background: rgba(244, 244, 244, 1);
  .content {
    .title {
      // display: flex;
      // justify-content: space-between;
      padding: 20rpx 30rpx;

      .title_left {
        color: rgba(153, 153, 153, 1);
        font-size: 26rpx;
        font-family: SourceHanSansSC-regular;
      }

      .title_right {
        // display: flex;
        // justify-content: space-between;
        color: rgba(153, 153, 153, 1);
        // font-size: 26rpx;
        font-family: SourceHanSansSC-regular;

        text {
          color: red;
          font-weight: bold;
        }
        .total {
          // margin-left: 10rpx;
          text {
            font-weight: bold;
            color: #d12312;
          }
        }
      }
    }
    .list_box {
      .list_item {
        width: 100%;
        line-height: 55rpx;
        background-color: rgba(255, 255, 255, 1);
        color: rgba(16, 16, 16, 1);
        // font-size: 28rpx;
        padding: 20rpx 20rpx;
        font-family: SourceHanSansSC-regular;
        border-bottom: 0.5rpx solid #e7e4e4;

        .list_item_title {
          // display: flex;
          // justify-content: space-between;

          .name {
            // display: flex;
            // align-items: center;
            color: rgba(16, 16, 16, 1);
            // font-size: 28rpx;
            font-family: SourceHanSansSC-bold;
            
            // font-weight: bold;

            .point {
              width: 15rpx;
              height: 15rpx;
              // border-radius: 50%;
              background: rgba(98, 177, 88, 1);
              // margin-right: 10rpx;
            }
          }
        }

        .type-inventory {
          // display: flex;
          // justify-content: space-between;

          text {
            color: red;
          }
        }

        .subtotal {
          // display: flex;
          // justify-content: flex-end;

          text {
            color: red;
          }
        }
      }
    }
  }
  .btn-box {
    display: flex;
    justify-content: space-evenly;
    // margin-top: 100rpx;

    .van-button {
      width: 180rpx;
      height: 72rpx;
      border-radius: 8rpx;
      color: rgba(255, 255, 255, 1);
      font-size: 28rpx;
      text-align: center;
      font-family: Microsoft Yahei;
    }
  }
}
// 弹框样式
.wrapper {
  // display: flex;
  // align-items: center;
  // justify-content: center;
  height: 100%;

  .block {
    width: 100%;
    height: 1000rpx;
    background-color: #fff;
    margin: 0 30rpx;
    border-radius: 16px;
    padding: 40rpx 20rpx;
    // font-size: 28rpx;

    .title {
      // display: flex;
      // justify-content: space-between;
      color: rgba(16, 16, 16, 1);
      // font-size: 32rpx;
      font-family: SourceHanSansSC-bold;
      .title-left {
        // font-weight: bold;
      }
    }

    // 不同意
    .content {
      margin-bottom: 68rpx;
      .btn_style {
        display: flex;
        justify-content: space-evenly;
        margin-top: 66rpx;
        .van-button {
          width: 180rpx;
          height: 72rpx;
          border-radius: 8rpx;
          color: rgba(255, 255, 255, 1);
          font-size: 28rpx;
          text-align: center;
          font-family: Microsoft Yahei;
        }
      }
    }
  }
}
</style>